<template>
    <div class="record">
        <!-- 新增tab切换（水电费和租金管理） -->
        <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane id="meterDom" label="水电表" name="first"></el-tab-pane>
      <el-tab-pane label="租金" name="second"></el-tab-pane>
    </el-tabs> -->
      <!-- 搜索框 -->
      <div class="search">
        <el-select @change="search" clearable v-model="tenantId" placeholder="请选择租户">
          <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.tenantName" :value="item.tenantId">
          </el-option>
        </el-select>
        <el-select multiple collapse-tags @change="search" clearable v-model="rechargeWay" placeholder="请选择交易方式">
          <el-option v-for="item in rechargeWayList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-date-picker @change="change" :clearable="false" v-model="time" type="daterange" align="center"
          range-separator="-" :picker-options="pickerOptions" start-placeholder="开始日期" end-placeholder="结束日期"
          value-format="yyyy-MM-dd">
        </el-date-picker>
        <el-button type="success" icon="el-icon-search" @click="search">搜索 / 刷新</el-button>
        <el-button type="primary" icon="el-icon-s-promotion" :disabled="tableData.length !== 0 ? false : true"
          @click="out">导出</el-button>
      </div>
      <!-- 表格数据 -->
      <div class="table" ref="table">
        <el-table :data="tableData" height="650" ref="isExpand" v-loading="loading" border
          highlight-current-row stripe style="width: 100%">
          >
          <template slot="empty">
            <el-empty description="暂无数据"></el-empty>
          </template>
          <el-table-column align="center" prop="tenantName" label="租户名称">
          </el-table-column>
          <el-table-column align="center" prop="count" label="支付总笔数">
          </el-table-column>
          <el-table-column align="center" prop="income" label="交易金额">
            <template slot-scope="scope">
              <el-tag>{{
                scope.row.income ? Number(scope.row.income).toFixed(2) : "0.00"
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="holdIncome" label="房东到手">
            <template slot-scope="scope">
              <el-tag>{{
                scope.row.holdIncome ? Number(scope.row.holdIncome).toFixed(2) : "0.00"
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="feeIncome" label="手续费">
            <template slot-scope="scope">
              <el-tag>{{
                scope.row.feeIncome ? Number(scope.row.feeIncome).toFixed(2) : "0.00"
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="rentFeeTime" label="交易时间">
          </el-table-column>
        </el-table>
        <el-pagination v-show="tableData.length !== 0" background @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[10, 30, 50, 100, 150, 200]"
          :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  import {
    getCollectApi,
    getTenantApi,
    outApi,
  } from "../../../../api/system/rent1";
  import { Loading } from "element-ui";
  export default {
    data() {
      return {
        pickerOptions: {
          disabledDate: (time) => {
            return time.getTime() > Date.now();
          },
        },
        tableData: [],
        loading: false,
        pageNum: 1,
        pageSize: 10,
        total: null,
        tenantList: [],
        tenantId: "",
        time: [],
        startDate: "",
        endDate: "",
        rechargeHuifuOrder: "",
        rechargeOrder: "",
        rechargeWay: "",
        rechargeWayList: [
          // {
          //   label: "现金充值",
          //   value: 1,
          // },
          // {
          //   label: "租币充值",
          //   value: 2,
          // },
          {
            label: "微信支付",
            value: 3,
          },
          {
            label: "支付宝支付",
            value: 4,
          },
        ],
        options: {
          fullscreen: true,
          text: "加载中...",
          background: "rgba(0,0,0,.5)",
        },
          activeName: "first" // 用户切换后绑定的标识
      };
    },
    mounted() {
  
  // 在组件加载时模拟点击默认水电表的选项卡  
  const defaultTab = { name: 'first', label: '水电表' }; // 模拟选中的选项卡对象  
  this.handleClick(defaultTab); // 调用 handleClick 方法  
  
  },
    created() {
      this.pageSize = Number(sessionStorage.getItem("pageSize")) || 10;
      this.pageNum = Number(sessionStorage.getItem("pageNum")) || 1;
      this.getTenant();
      this.getTime();
      this.getCollect(
        this.pageNum,
        this.pageSize,
        this.startDate,
        this.endDate,
        this.rechargeWay,
        this.tenantId
      );
    },
    destroyed() {
      sessionStorage.removeItem("pageNum");
      sessionStorage.removeItem("pageSize");
    },
    methods: {
          //左侧 区域和分组切换的乐行
          handleClick(e) {
        console.log("切换分组和区域tab", e);
        // 判断点击的是区域选择还是分组选择
        if (e.name == "first") {
          console.log("走水电表");
          // 调用 水电表筛选
        } else {
          console.log("走租金");
          // 调用租金
   
        }
      },
      search() {
        this.pageNum = 1;
        let arr = this.rechargeWay;
        if (this.rechargeWay.length !== 0) {
          this.rechargeWay = this.rechargeWay.join();
        }
        this.getCollect(
          this.pageNum,
          this.pageSize,
          this.startDate,
          this.endDate,
          this.rechargeWay,
          this.tenantId
        );
        this.rechargeWay = arr;
        this.$refs.isExpand.bodyWrapper.scrollTop = 0;
      },
      // 获取记录列表
      getCollect(pageNum, pageSize, startDate, endDate, rechargeWay, tenantId) {
        this.loading = true;
        getCollectApi(
          pageNum,
          pageSize,
          startDate,
          endDate,
          rechargeWay,
          tenantId
        ).then((res) => {
          if (res.code == 200) {
            this.total = res.data.total;
            this.loading = false;
            this.tableData = res.data.rows;
          }
        });
      },
      getTime() {
        let year = new Date().getFullYear();
        let month = new Date().getMonth() + 1;
        let day = new Date().getDate();
        let date = `${year}-${month}-${day}`;
        this.time = [date, date];
        this.startDate = date;
        this.endDate = date;
      },
      change() {
        if (this.time !== null) {
          this.startDate = this.time[0];
          this.endDate = this.time[1];
        } else {
          this.startDate = "";
          this.endDate = "";
        }
        this.search();
      },
      // 获取租户
      getTenant() {
        getTenantApi().then((res) => {
          if (res.code == 200) {
            this.tenantList = res.data;
          }
        });
      },
      // 分页 pagesize
      handleSizeChange(val) {
        this.pageNum = 1;
        let arr = this.rechargeWay;
        if (this.rechargeWay.length !== 0) {
          this.rechargeWay = this.rechargeWay.join();
        }
        this.getCollect(
          this.pageNum,
          val,
          this.startDate,
          this.endDate,
          this.rechargeWay,
          this.tenantId
        );
        this.rechargeWay = arr;
        sessionStorage.setItem("pageSize", val);
        this.pageSize = val;
        this.$refs.isExpand.bodyWrapper.scrollTop = 0;
      },
      // pageNum
      handleCurrentChange(val) {
        let arr = this.rechargeWay;
        if (this.rechargeWay.length !== 0) {
          this.rechargeWay = this.rechargeWay.join();
        }
        this.getCollect(
          val,
          this.pageSize,
          this.startDate,
          this.endDate,
          this.rechargeWay,
          this.tenantId
        );
        this.rechargeWay = arr;
        sessionStorage.setItem("pageNum", val);
        this.pageNum = val;
        this.$refs.isExpand.bodyWrapper.scrollTop = 0;
      },
      // 导出
      async out() {
        let arr = this.rechargeWay;
        if (this.rechargeWay.length !== 0) {
          this.rechargeWay = this.rechargeWay.join();
        }
        Loading.service(this.options);
        await outApi(
          this.startDate,
          this.endDate,
          this.rechargeWay,
          this.tenantId
        )
          .then((res) => {
            Loading.service(this.options).close();
            if (
              res.type ==
              "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
            ) {
              let blob = new Blob([res], { type: "application/octet-stream" });
              const link = document.createElement("a");
              link.style.display = "none";
              link.href = URL.createObjectURL(blob);
              link.setAttribute("download", "租金交易汇总.xlsx");
              document.body.appendChild(link);
              link.click();
              document.body.removeChild(link);
            }
          })
          .catch((err) => {
            Loading.service(this.options).close();
            console.log(err);
          });
        this.rechargeWay = arr;
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .record {
    // padding-top: 15px;
    // padding: 0 15px;
   margin: -20px  -15px;
  
    height: calc(100vh - 100px);

    .search {
      margin-top: 20px;
      display: flex;
      align-items: center;
      margin-bottom: 15px;
  
      .elInput {
        width: 200px;
        margin: 5px;
      }
  
      .el-select {
        box-sizing: border-box;
        width: 200px;
        margin: 5px;
      }
  
      .el-button {
        margin-left: 15px;
      }
    }
  
    .table {
      height: 90%;
  
      .el-table {
        height: 80%;
      }
  
      .el-pagination {
        text-align: center;
        margin-top: 20px;
      }
    }
  }
  </style>